<script setup>
import { ref } from 'vue';

// 课程进度
const progress = ref(35);
const activeTab = ref('content');

// 课程章节数据
const chapters = [
  {
    id: 1,
    title: "人工智能教育简介",
    status: "completed",
    duration: "15分钟"
  },
  {
    id: 2,
    title: "AI 辅助教学技术",
    status: "current",
    duration: "20分钟"
  },
  {
    id: 3,
    title: "个性化学习路径设计",
    status: "upcoming",
    duration: "25分钟"
  },
  {
    id: 4,
    title: "实践案例分析",
    status: "upcoming",
    duration: "30分钟"
  }
];

// 相关课程数据
const relatedCourses = [
  {
    title: "AI驱动的自适应学习系统设计",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/fengm.png",
    rating: "4.8",
    duration: "2小时30分钟",
    instructor: "李教授"
  },
  {
    title: "教育数据分析与学习预测",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/ai.png",
    rating: "4.7",
    duration: "1小时45分钟",
    instructor: "王博士"
  },
  // {
  //   title: "智能教育平台开发实践",
  //   image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/ai.png",
  //   rating: "4.9",
  //   duration: "3小时15分钟",
  //   instructor: "陈工程师"
  // }
];

// 导航返回到study页面
const navigateBack = () => {
	
  uni.switchTab({
    url: '/pages/study/study'
  });
};

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 获取章节状态样式
const getChapterStatusClass = (status) => {
  switch (status) {
    case 'completed':
      return 'bg-blue-50 text-blue-600 border-blue-200';
    case 'current':
      return 'bg-blue-100 text-blue-700 border-blue-300';
    default:
      return 'bg-gray-50 text-gray-500 border-gray-200';
  }
};

// 获取章节图标
const getChapterIcon = (status) => {
  switch (status) {
    case 'completed':
      return 'check-circle';
    case 'current':
      return 'play-circle';
    default:
      return 'circle';
  }
};
</script>

<template>
  <view class="course-player">
    <!-- 顶部导航栏 -->
    <view class="top-nav" >
      <view class="nav-left">
        <view class="back-button" @click="navigateBack">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </view>
        <text class="nav-title">AI模型实战训练演示</text>
      </view>
      <view class="more-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="12" cy="5" r="1"></circle>
          <circle cx="12" cy="19" r="1"></circle>
        </svg>
      </view>
    </view>

    <!-- 视频播放器 -->
    <view class="video-container">
      <video src="https://imagecgr.oss-cn-beijing.aliyuncs.com/video.mp4" initial-time="0" id="courseVideo" controls
        autoplay="false" loop="false" muted="false" enable-progress-gesture="true" show-fullscreen-btn="true"
        show-play-btn="true" show-center-play-btn="true" show-loading="true" :http-cache="true" object-fit="contain"
        class="video-player"></video>
    </view>

    <!-- 课程信息和控制 -->
    <view class="course-info">
      <view class="course-header">
        <view class="ai-badge">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
            <path d="M19 17.7c.4.2.8.3 1.2.3a3 3 0 0 0-3-3c-.2 0-.3 0-.5.1"></path>
            <path d="m2 2 20 20"></path>
          </svg>
          <text>AI 增强课程</text>
        </view>
        <view class="action-buttons">
          <view class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path
                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
              </path>
            </svg>
          </view>
          <view class="action-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="18" cy="5" r="3"></circle>
              <circle cx="6" cy="12" r="3"></circle>
              <circle cx="18" cy="19" r="3"></circle>
              <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
              <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
            </svg>
          </view>
        </view>
      </view>

      <text class="course-title">AI模型实战训练演示</text>

      <view class="course-stats">
        <view class="stat-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon
              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
            </polygon>
          </svg>
          <text>4.9</text>
        </view>
        <view class="stat-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
          <text>12,345 学员</text>
        </view>
        <view class="stat-item">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <text>45分钟</text>
        </view>
      </view>

      <view class="instructor">
        <image class="instructor-avatar"
          src=""
          mode="aspectFill"></image>
        <view class="instructor-info">
          <text class="instructor-name">张教授</text>
          <text class="instructor-title">人工智能教育专家</text>
        </view>
      </view>

      <view class="progress-container">
        <view class="progress-header">
          <text class="progress-label">课程进度</text>
          <text class="progress-percent">{{ progress }}%</text>
        </view>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progress + '%' }"></view>
        </view>
      </view>
    </view>

    <!-- 标签页导航 -->
    <view class="tabs-nav">
      <view class="tab-item" :class="{ 'active': activeTab === 'content' }" @click="switchTab('content')">
        内容
      </view>
      <view class="tab-item" :class="{ 'active': activeTab === 'ai' }" @click="switchTab('ai')">
        AI 笔记
      </view>
      <view class="tab-item" :class="{ 'active': activeTab === 'resources' }" @click="switchTab('resources')">
        资源
      </view>
      <view class="tab-item" :class="{ 'active': activeTab === 'comments' }" @click="switchTab('comments')">
        讨论
      </view>
    </view>

    <!-- 标签页内容 -->
    <view class="tab-content">
      <!-- 内容标签页 -->
      <view v-if="activeTab === 'content'" class="content-tab">
        <view class="section">
          <view class="section-title-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
            </svg>
            <text class="section-title">课程章节</text>
          </view>

          <view v-for="chapter in chapters" :key="chapter.id" class="chapter-card"
            :class="getChapterStatusClass(chapter.status)">
            <view class="chapter-icon">
              <svg v-if="getChapterIcon(chapter.status) === 'check-circle'" xmlns="http://www.w3.org/2000/svg"
                width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
              </svg>
              <svg v-else-if="getChapterIcon(chapter.status) === 'play-circle'" xmlns="http://www.w3.org/2000/svg"
                width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <polygon points="10 8 16 12 10 16 10 8"></polygon>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
            </view>
            <view class="chapter-info">
              <text class="chapter-title">{{ chapter.title }}</text>
              <view class="chapter-meta">
                <text class="chapter-status">{{
                  chapter.status === 'completed' ? '已完成' :
                    chapter.status === 'current' ? '当前学习' : '未开始'
                }}</text>
                <text class="chapter-duration">{{ chapter.duration }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="divider"></view>

        <view class="section">
          <text class="section-title">课程介绍</text>
          <text class="section-text">
            本课程深入探讨人工智能技术如何革新教育领域，从基础理论到实践应用，全面介绍AI在个性化学习、智能评估和教学辅助等方面的创新应用。通过案例分析和实践演示，帮助教育工作者掌握前沿AI教育工具和方法。
          </text>

          <text class="section-title mt-16">你将学到</text>
          <view class="learning-points">
            <view class="learning-point">
              <view class="point-dot"></view>
              <text class="point-text">AI教育应用基础理论</text>
            </view>
            <view class="learning-point">
              <view class="point-dot"></view>
              <text class="point-text">智能学习系统设计</text>
            </view>
            <view class="learning-point">
              <view class="point-dot"></view>
              <text class="point-text">个性化学习路径构建</text>
            </view>
            <view class="learning-point">
              <view class="point-dot"></view>
              <text class="point-text">AI辅助教学实践方法</text>
            </view>
            <view class="learning-point">
              <view class="point-dot"></view>
              <text class="point-text">教育数据分析与应用</text>
            </view>
            <view class="learning-point">
              <view class="point-dot"></view>
              <text class="point-text">AI教育产品评估标准</text>
            </view>
          </view>
        </view>

        <view class="related-courses">
          <text class="section-title">推荐课程</text>
          <view class="course-list">
            <view v-for="(course, index) in relatedCourses" :key="index" class="related-course-card">
              <image class="course-image" :src="course.image" mode="aspectFill"></image>
              <view class="course-details">
                <text class="course-name">{{ course.title }}</text>
                <view class="course-meta">
                  <view class="meta-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
                      fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                      stroke-linejoin="round" class="star-icon">
                      <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                      </polygon>
                    </svg>
                    <text>{{ course.rating }}</text>
                  </view>
                  <view class="meta-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <circle cx="12" cy="12" r="10"></circle>
                      <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    <text>{{ course.duration }}</text>
                  </view>
                </view>
                <text class="instructor-name">{{ course.instructor }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- AI 笔记标签页 -->
      <view v-if="activeTab === 'ai'" class="ai-tab">
        <view class="ai-summary-header">
          <view class="section-title-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path
                d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z">
              </path>
              <circle cx="7" cy="16" r="1"></circle>
              <circle cx="17" cy="16" r="1"></circle>
            </svg>
            <text class="section-title">AI 智能笔记</text>
          </view>
          <view class="copy-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
            </svg>
            <text>复制</text>
          </view>
        </view>

        <view class="ai-card">
          <view class="ai-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path
                d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z">
              </path>
              <circle cx="7" cy="16" r="1"></circle>
              <circle cx="17" cy="16" r="1"></circle>
            </svg>
          </view>

          <view class="ai-content">
            <view class="ai-tabs">
              <view class="ai-tab-item active">课程摘要</view>
              <view class="ai-tab-item">关键点</view>
              <view class="ai-tab-item">思考题</view>
            </view>

            <view class="ai-summary">
              <text class="ai-text">
                本节课深入探讨了AI辅助教学技术的最新发展和应用场景。课程首先介绍了AI在教育领域的基本概念和发展历程，然后详细分析了智能辅助教学系统的核心组件，包括知识图谱、自适应学习算法和智能评估机制。
              </text>
              <text class="ai-text">
                课程重点讨论了如何利用机器学习技术构建个性化学习路径，通过分析学生的学习行为数据，实时调整教学内容和难度，提高学习效率。同时，课程也探讨了AI教育应用面临的挑战，如数据隐私保护、算法偏见和教师角色转变等问题。
              </text>
              <text class="ai-text">
                最后，通过多个实际案例展示了AI辅助教学在不同教育场景中的应用效果，并提供了实施AI教育解决方案的实用建议和最佳实践。
              </text>
            </view>

            <view class="ai-footer">
              <text class="ai-timestamp">AI生成内容 · 更新于2小时前</text>
              <view class="ai-actions">
                <view class="ai-action-button">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path
                      d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                    </path>
                  </svg>
                </view>
                <view class="ai-action-button">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path
                      d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17">
                    </path>
                  </svg>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 资源标签页 -->
      <view v-if="activeTab === 'resources'" class="resources-tab">
        <view class="section-title-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
          <text class="section-title">课程资源</text>
        </view>

        <view class="resource-list">
          <view class="resource-card">
            <view class="resource-icon pdf">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
            </view>
            <view class="resource-info">
              <text class="resource-title">AI教育应用白皮书.pdf</text>
              <text class="resource-size">2.4 MB</text>
            </view>
            <view class="download-button">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
            </view>
          </view>

          <view class="resource-card">
            <view class="resource-icon pdf">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
            </view>
            <view class="resource-info">
              <text class="resource-title">课程PPT - AI辅助教学技术.pdf</text>
              <text class="resource-size">5.7 MB</text>
            </view>
            <view class="download-button">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
            </view>
          </view>

          <view class="resource-card">
            <view class="resource-icon video">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="23 7 16 12 23 17 23 7"></polygon>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
              </svg>
            </view>
            <view class="resource-info">
              <text class="resource-title">案例演示视频.mp4</text>
              <text class="resource-size">45.2 MB</text>
            </view>
            <view class="download-button">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
            </view>
          </view>
        </view>

        <text class="section-title mt-16">相关链接</text>

        <view class="link-list">
          <view class="link-card">
            <view class="link-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
              </svg>
            </view>
            <view class="link-info">
              <text class="link-title">AI教育资源库</text>
              <text class="link-description">包含最新AI教育研究论文和工具</text>
            </view>
          </view>

          <view class="link-card">
            <view class="link-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
              </svg>
            </view>
            <view class="link-info">
              <text class="link-title">教育技术社区</text>
              <text class="link-description">与其他教育工作者交流AI应用经验</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 讨论标签页 -->
      <view v-if="activeTab === 'comments'" class="comments-tab">
        <view class="section-title-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
          <text class="section-title">讨论区</text>
        </view>

        <view class="comment-form">
          <image class="user-avatar" src="/static/placeholder.png" mode="aspectFill"></image>
          <view class="comment-input-container">
            <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
            <button class="comment-submit">发布评论</button>
          </view>
        </view>

        <view class="comment-list">
          <view class="comment-item">
            <image class="comment-avatar" src="/static/placeholder.png" mode="aspectFill"></image>
            <view class="comment-content">
              <view class="comment-header">
                <text class="comment-author">张同学</text>
                <text class="comment-time">2小时前</text>
              </view>
              <text class="comment-text">这节课讲解的AI辅助教学技术非常实用，特别是个性化学习路径的设计方法对我帮助很大。</text>
              <view class="comment-actions">
                <view class="comment-action">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path
                      d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                    </path>
                  </svg>
                  <text>12</text>
                </view>
                <view class="comment-action">
                  <text>回复</text>
                </view>
              </view>

              <view class="reply-list">
                <view class="reply-item">
                  <image class="reply-avatar" src="/static/placeholder.png" mode="aspectFill"></image>
                  <view class="reply-content">
                    <view class="reply-header">
                      <text class="reply-author">李教授</text>
                      <text class="reply-time">1小时前</text>
                    </view>
                    <text class="reply-text">谢谢你的反馈！如果你对个性化学习路径有更多疑问，可以在下节课后我们详细讨论。</text>
                    <view class="reply-actions">
                      <view class="reply-action">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <path
                            d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                          </path>
                        </svg>
                        <text>5</text>
                      </view>
                      <view class="reply-action">
                        <text>回复</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="comment-item">
            <image class="comment-avatar" src="/static/placeholder.png" mode="aspectFill"></image>
            <view class="comment-content">
              <view class="comment-header">
                <text class="comment-author">王同学</text>
                <text class="comment-time">昨天</text>
              </view>
              <text class="comment-text">请问老师，课程中提到的智能评估系统有没有开源的实现？想尝试在自己的项目中应用。</text>
              <view class="comment-actions">
                <view class="comment-action">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path
                      d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3">
                    </path>
                  </svg>
                  <text>8</text>
                </view>
                <view class="comment-action">
                  <text>回复</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="download-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="7 10 12 15 17 10"></polyline>
          <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>
        <text>下载</text>
      </view>
      <view class="continue-button">
        <text>继续学习</text>
      </view>
    </view>
  </view>
</template>

<style>
.course-player {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-button,
.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #374151;
}

.nav-title {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* 视频播放器 */
.video-container {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #000000;
}

.video-player {
  width: 100%;
  height: 100%;
}

/* 课程信息 */
.course-info {
  padding: 16px;
  background-color: #ffffff;
}

.course-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ai-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #6b7280;
}

.course-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.course-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.stat-item:first-child {
  color: #f59e0b;
}

.instructor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.instructor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
}

.instructor-info {
  flex: 1;
}

.instructor-name {
  font-size: 14px;
  font-weight: 500;
}

.instructor-title {
  font-size: 12px;
  color: #6b7280;
}

.progress-container {
  margin-bottom: 8px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.progress-label {
  font-size: 14px;
  font-weight: 500;
}

.progress-percent {
  font-size: 14px;
  color: #6b7280;
}

.progress-bar {
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #2563eb;
  border-radius: 4px;
}

/* 标签页导航 */
.tabs-nav {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background-color: #ffffff;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #6b7280;
  position: relative;
}

.tab-item.active {
  color: #1d4ed8;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: #2563eb;
}

/* 标签页内容 */
.tab-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
  /* 为底部栏留出空间 */
}

.section {
  padding: 16px;
  background-color: #ffffff;
}

.section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.section-title-wrapper svg {
  color: #2563eb;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.section-text {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 章节卡片 */
.chapter-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.text-blue-600 {
  color: #2563eb;
}

.border-blue-200 {
  border-color: #bfdbfe;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.text-blue-700 {
  color: #1d4ed8;
}

.border-blue-300 {
  border-color: #93c5fd;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.text-gray-500 {
  color: #6b7280;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.chapter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f3f4f6;
}

.chapter-info {
  flex: 1;
}

.chapter-title {
  font-size: 14px;
  font-weight: 500;
}

.chapter-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.chapter-status,
.chapter-duration {
  font-size: 12px;
  color: #6b7280;
}

/* 学习点 */
.learning-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.learning-point {
  display: flex;
  align-items: center;
  gap: 8px;
}

.point-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2563eb;
}

.point-text {
  font-size: 14px;
}

/* 分隔线 */
.divider {
  height: 8px;
  background-color: #f3f4f6;
}

/* 相关课程 */
.related-courses {
  padding: 16px;
  background-color: #f8f9fa;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.related-course-card {
  display: flex;
  height: 96px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.course-image {
  width: 33.333%;
  height: 100%;
  background-color: #f3f4f6;
}

.course-details {
  flex: 1;
  padding: 12px;
}

.course-name {
  font-size: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.star-icon {
  color: #f59e0b;
}

/* AI 标签页 */
.ai-tab {
  padding: 16px;
  background-color: #ffffff;
}

.ai-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.copy-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
}

.ai-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  background-color: #ffffff;
}

.ai-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eff6ff;
  color: #2563eb;
  margin-top: 4px;
}

.ai-content {
  flex: 1;
}

.ai-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.ai-tab-item {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #6b7280;
  white-space: nowrap;
}

.ai-tab-item.active {
  background-color: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

.ai-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-text {
  font-size: 14px;
  line-height: 1.5;
}

.ai-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.ai-timestamp {
  font-size: 12px;
  color: #6b7280;
}

.ai-actions {
  display: flex;
  gap: 8px;
}

.ai-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* 资源标签页 */
.resources-tab {
  padding: 16px;
  background-color: #ffffff;
}

.resource-list,
.link-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resource-card,
.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
}

.resource-icon,
.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.resource-icon.pdf {
  background-color: #fee2e2;
  color: #ef4444;
}

.resource-icon.video {
  background-color: #ede9fe;
  color: #8b5cf6;
}

.link-icon {
  background-color: #dbeafe;
  color: #2563eb;
}

.resource-info,
.link-info {
  flex: 1;
}

.resource-title,
.link-title {
  font-size: 14px;
  font-weight: 500;
}

.resource-size,
.link-description {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #6b7280;
}

/* 评论标签页 */
.comments-tab {
  padding: 16px;
  background-color: #ffffff;
}

.comment-form {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.comment-input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-input {
  width: 100%;
  height: 80px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  resize: none;
}

.comment-submit {
  align-self: flex-start;
  padding: 6px 12px;
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 4px;
  font-size: 14px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-author {
  font-size: 14px;
  font-weight: 500;
}

.comment-time {
  font-size: 12px;
  color: #6b7280;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
}

.comment-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.comment-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.reply-list {
  margin-top: 12px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid #f3f4f6;
}

.reply-item {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.reply-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reply-author {
  font-size: 12px;
  font-weight: 500;
}

.reply-time {
  font-size: 10px;
  color: #6b7280;
}

.reply-text {
  font-size: 12px;
  line-height: 1.5;
}

.reply-actions {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.reply-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #6b7280;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 16px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

.bottom-bar .download-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  width: auto;
  height: auto;
}

.continue-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 8px;
  font-size: 14px;
}
</style>